<div id="once-grid" class="row">
    <link rel="stylesheet" type="text/css" href="/public/static/plugin/qtip2/jquery.qtip.css" />
    <link rel="stylesheet" type="text/css" href="/public/static/plugin/grid/jquery.grid.css" />
    <style>
        .nav-tabs-float { width: 49.5%; }
        .nav-tabs-float:nth-child(even) { float:right; }
        .nav-tabs-float:nth-child(odd) { float:left; }
        .once-table a[confirm] { color: red; }
        .nav-tabs-line{width: 100%;}
    </style>

    <div class="col-md-12">

        <{if $grid.type === 'tab'}>
        <div class="nav-tabs-custom">
            <!-- Tabs within a box -->

            <ul class="nav nav-tabs">
                <{if $grid.main.length > 1 || !empty($grid.main[0]['name'])}>
                    <{foreach from=$grid.main item=item key=key}>
                    <{if isset($item.config)}>
                    <li><a <{if $ajax_search == 1 }>data-config="<{$item.config}>"<{/if}> data-toggle="tab" class="grid-tab" href="#<{$item.target}>" <{if $item.type}>data-type="<{$item.type}>"<{/if}> ><{$item.name}></a></li>
                    <{else}>
                    <li><a href="javascript:;" class="grid-link" value="<{$item.value}>" <{if $item.to}>to="<{$item.to}>"<{/if}>><{$item.name}></a></li>
                    <{/if}>
                    <{/foreach}>
                <{/if}>
            </ul>

            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <{foreach from=$grid.main item=item key=key}>
                <{if isset($item.config)}>
                <div style="position: relative; margin: 10px;" id="<{$item.target}>" class="tab-pane active">加载中</div>
                <{/if}>
                <{/foreach}>
            </div>
        </div>

        <{elseif $grid.type === 'float'}>

        <{foreach from=$grid.main item=item key=key}>
        <div class="nav-tabs-custom nav-tabs-float">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" class="grid-tab" href="#<{$item.target}>"><{$item.name}></a></li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div style="position: relative; margin: 10px;" id="<{$item.target}>" class="tab-pane active">加载中</div>
            </div>
        </div>
        <{/foreach}>
        	
        <{elseif $grid.type === 'line'}>

        <{foreach from=$grid.main item=item key=key}>
        <div class="nav-tabs-custom nav-tabs-line">
            <!-- Tabs within a box -->
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" class="grid-tab" href="#<{$item.target}>"><{$item.name}></a></li>
            </ul>
            <div class="tab-content no-padding">
                <!-- Morris chart - Sales -->
                <div style="position: relative; margin: 10px;" id="<{$item.target}>" class="tab-pane active">加载中</div>
            </div>
        </div>
        <{/foreach}>

        <{/if}>
    </div>

    <script src="/public/static/plugin/qtip2/jquery.qtip.js"></script>
    <script src="/public/static/plugin/grid/jquery.grid.js"></script>
    <script src="/public/static/plugin/grid/jquery.grid.rule.js"></script>
    <script>
        $(function(){
            <{foreach from=$grid.main item=item key=key}>
            <{if !empty($item.config)}>
            var conf = <{$item.config nofilter}>;
            $("#<{$item.target}>").grid(conf);
            <{/if}>
            <{/foreach}>

            if($("a.grid-tab").length > 0) $("a.grid-tab").first().click();
            

            $("a.grid-link").click(function(){
                var value = $(this).attr('value'),
                        to = $(this).attr('to');

                console.log(to);

                if(to) {
                    $("#" + to).val(value);
                    $("#filter-btn").click();
                }
            });

            $(".once-table a[confirm]").click(function(){
                return window.confirm($(this).attr('confirm'));
            });

            $('[tips!=""]').qtip({ // Grab all elements with a non-blank data-tooltip attr.
                content: {
                    attr: 'tips' // Tell qTip2 to look inside this attr for its content
                },
                position: {
                    my: 'bottom center',  // Position my top left...
                    at: 'top center' // at the bottom right of...
                },
                style: {
                    classes: 'qtip-bootstrap qtip-shadow'
                },
                show: {
                    solo: true
                },
                hide: {
                    fixed: true,
                    delay: 300
                }
            })

    	
        });
        

				
    </script>
</div>